<template>
  <div class="forget-password">
    <div class="forget-center">
      <div class="forget-content">
        <Row>
          <H1>密码找回</H1>
          <div class="forget-login">
            想起来了?<a @click="jumpLogin">
            回去登录
          </a>
          </div>
        </Row>
        <Divider/>
        <Form ref="formInline" class="forget-form" :model="backInfo" :rules="backInfoRule">
          <FormItem label="" prop="phoneNum">
            <Input v-model="backInfo.phoneNum" placeholder="手机号">
            </Input>
          </FormItem>
          <FormItem label="" prop="msgCode">
            <Input size="large" v-model="backInfo.msgCode" :maxlength="6" placeholder="短信验证码">
              <a slot="append" @click="sendCode">获取验证码</a>
            </Input>
          </FormItem>
          <FormItem label="" class="btn-item">
            <Button class="forget-btn" @click="resetPassword">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定
            </Button>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import {mobilePhoneValidator} from "@/api/data-check";
import {backPassword, sendBackCode} from "@/api/user";

export default {
  name: "forget-password",
  data() {
    return {
      wayBack: "phone",
      backInfo: {
        phoneNum: "",
        msgCode: ""
      },
      backInfoRule: {
        phoneNum: [
          {required: true, validator: mobilePhoneValidator, trigger: 'blur', tip: "手机号"},
        ],
        msgCode: [
          {required: true, message: '短信验证码不能为空', trigger: 'blur'},
          {pattern: /^(-?\d+)?$/, message: '短信验证码为数字', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    //找回密码
    resetPassword() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          backPassword(this.backInfo).then(res => {
            if (res.code === '0') {
              this.$router.push({
                name: 'success-view',
                params: {
                  title: "找回密码成功",
                  menuName: "登录",
                  menuPath: "login",
                  something: "找回密码",
                  moreMsg: "新密码已发送至您手机中，请注意短信消息提醒。",
                }
              })
            } else {
              this.$Message.error(res.msg);
            }
          })
        } else {
          this.$Message.warning('请完善表单信息');
        }
      })
    },

    //跳到登录页
    jumpLogin() {
      this.$router.push({
        name: 'login'
      })
    },

    //发送验证码
    sendCode() {
      sendBackCode(this.backInfo).then(res => {
        if (res.code === '0') {
          this.$Message.success(res.msg)
        } else {
          this.$Message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import './forget-password.less';
</style>
